<template>
  <div>
    <div id="map" :style="style"/>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import $ from 'jquery'
import demo from '../assets/svg/china.svg'

import {draw} from '../minxs/draw'
export default {
  name: 'MAP',
  mixins:[draw],
  data() {
    return {
      style:{width:'100%',height:'100%'}
    }
  },
  mounted() {
    this.mapInit()
  },
  methods: {
    mapInit() {
      const chartDom = document.getElementById('map')
      const myChart = echarts.init(chartDom)

      let option
      $.get(demo, function (svg) {
        echarts.registerMap('map', { svg: svg })
        option = {
          title: {
            left: 'center',
            text: '全国各大城市天气情况总览图',
          },
          tooltip: {},
          visualMap: {
            left: 'center',
            bottom: '10%',
            min: -15,
            max: 40,
            orient: 'horizontal',
            text: ['摄氏度/℃', '最高温度'],
            realtime: true,
            calculable: true,
            inRange: {
              color: ['#dbac00', '#db6e00', '#cf0000']
            }
          },
          series: [
            {
              name: '实时最高温度',
              type: 'map',
              map: 'map',
              roam: true,
              emphasis: {
                label: {
                  show: false
                }
              },
              selectedMode: false,
              data: [
                { name: '1', value: 5 },
                { name: '2', value: 15 },
                { name: '3', value: 25 },
                { name: '4', value: 35 },
                { name: '5', value: 5 },
                { name: '6', value: 15 },
                { name: '7', value: 15 },
                { name: '8', value: 35 },
                { name: '9', value: 15 },
                { name: '10', value: 15 },
                { name: '11', value: 35 },
                { name: '12', value: 15 },
                { name: '13', value: 15 },
                { name: '14', value: 35 },
                { name: '15', value: 15 },
                { name: '16', value: 15 },
                { name: '17', value: 15 },
                { name: '18', value: 35 },
                { name: '19', value: 15 },
                { name: '20', value: 15 },
                { name: '21', value: 15 },
                { name: '22', value: 35 },
                { name: '23', value: 15 },
                { name: '24', value: 15 },
                { name: '25', value: 35 },
                { name: '26', value: 15 },
                { name: '27', value: 15 },
                { name: '28', value: 35 },
                { name: '29', value: 15 },
                { name: '30', value: 15 },
                { name: '31', value: 15 },
                { name: '32', value: 35 },
                { name: '33', value: 15 },
                { name: '34', value: 15 }
              ],
              geo: {
                map: 'map',
              },
            }
          ]
        };
        myChart.setOption(option);
      });
      option && myChart.setOption(option);
    }
  }
}
</script>

<style  scoped>

</style>
